<!--
 * @Descripttion: 
 * @version: 
 * @Author: liangxh
 * @Date: 2020-07-14 17:23:22
 * @LastEditors: liangxh
 * @LastEditTime: 2020-07-14 17:23:44
--> 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--单选框-->
  <h2>单选框</h2>
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <!--多选框-->
  <h2>多选框</h2>
  <label :for="item" v-for="(item,index) in hobbies" :key="index">
    <input type="checkbox" name="hobby" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
  <h2>你的爱好是：{{hobbies}}</h2>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isAgree: false,
      hobbies: ["篮球","足球","乒乓球","羽毛球"]
    }
  })
</script>
</body>
</html>